24. VuePress : theme/enhanceApp.js 主題增強術

上一篇說明了主題在需要安裝 plugins 外掛套件時需要配置的 theme/index.js 主題配置檔，但有時我們的需求並不是 plugins 可以解決的，需要更直接的在專案中引入模組時該怎麼辦呢？

theme/enhanceApp.js 的用處

在 theme 資料夾中，還有一個約定檔案叫做 enhanceApp.js 這個檔案可以 export default 一個 function 來引入一些模組進入系統、設置路由 hooks 等等行為，具備了很強的功能。

這個 hooks function 被 VuePress 呼叫時會帶入一個物件作為參數，這個物件中具有 Vue 、 options 、 router 、 siteDate 四個重要的屬性，而我們在使用上習慣直接使用 JavaScript 的解構技巧來取出這些屬性進行使用：

export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數據
}) => {
  // ...做一些其他的應用級別的優化
}

在 VuePress 中安裝 Element UI

這邊就示範一下透過 theme/enhanceApp.js 來將 Vue 常用的 Element UI 這個 UI 套件安裝進專案中吧。

首先當然要先進行安裝： yarn add element-ui

然後就可以在檔案中將所需的模組引入，接著用解構出來的 Vue 實例來進行 Element UI 的安裝步驟就完成啦！

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
}) => {
    Vue.use(ElementUI);
}